<template>
<div>
  <div class="six">
        <!-- 面包屑导航 -->
        <el-breadcrumb
        style=" margin-top: 10px; margin-left: 10px"
          separator-class="el-icon-arrow-right">
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: 'List' }">景区列表</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: 'Reserve' }">景区详情</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: 'Dingdan' }">填写订单</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px">支付</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
  <div class="pay">
    <div class="pay1">
      <h3>老君山一级索道往返</h3>
      <span class="qian">¥130.00</span>
      <p class="pay2">支付订单号：&nbsp;02021102010201058738185</p>
      <p class="pay3">
        <span>数量：1</span>
        <span>联系人：15767865437</span>
        <span> 联系方式：pijoij</span>
        <span>游玩时间：2021-10-20</span>
      </p>
      <p class="pay4"><span>|</span>选择支付方式:</p>
      <div class="pay5">
        <div class="pay6">
          <input type="radio" />
          <img src="/img/weixinzhifu.jpg" alt="" />
        </div>
      </div>
      <!-- 确认提交按钮 -->
      <button class="bt1">确认提交</button>
    </div>
  </div>
  </div>
</template>
<style scoped>
.bt1 {
  background-color: rgb(201, 30, 30);
  padding: 10px 25px;
  color: azure;
  margin: 100px 500px 30px;
}
.pay6 input {
  margin-right: 15px;
}
.pay6 {
  padding: 30px 15px;
}
.pay5 {
  height: 94px;
  background-color: #f7f7f7;
  border-radius: 3px;
}
.pay4 > span {
  color: rgb(161, 15, 15);
  margin-right: 15px;
  font: 50px;
}
.pay4 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.pay3 > span {
  margin-right: 20px;
}
.pay3 {
  color: gray;
}
.pay2 {
  margin: 20px 0px 15px;
}
.qian {
  font: 30px "microsoft", "yaahei";
  color: red;
  margin: 0px 0px 0px 10px;
  float: right;
  font-weight: 700px;
}
.pay1 h3 {
  margin: 10px 0;
  display: inline-block;
}
.pay1 {
  width: 1132px;
  height: 402px;
  margin: auto;
}
.pay {
  width: 1200px;
  height: 454px;
  border: 1px solid rgb(175, 170, 170);
  border-radius: 5px;
  margin: 20px auto;
}
.six {
  height: 30px;
  width: 1200px;
  margin: auto;
  background-color: rgb(231, 231, 231);
}
</style>